<template>
  <div id="profile">
    <head-top goBack="true" headTitle="我的"></head-top>
    <section class="profile-number">
      <router-link
        :to="userInfo && userInfo.id ? '/profile/info' : '/login'"
        class="profile-link"
      >
        <img
          :src="avatarUrl"
          alt=""
          class="privateImage"
          v-if="userInfo && userInfo.user_id"
        />
        <span class="privateImage" v-else>
          <icon-svg icon-class="icontouxiang"></icon-svg>
        </span>
        <div class="user-info">
          <p class="username">{{ username }}</p>
          <p class="phone">
            <span>
              <icon-svg icon-class="iconshouji"></icon-svg>
            </span>
            {{ mobile }}
          </p>
        </div>
        <span>
          <icon-svg icon-class="iconarrow-left"></icon-svg>
        </span>
      </router-link>
    </section>
    <section class="info-data">
      <ul class="info-data-ul">
        <router-link tag="li" class="info-data-li" to="/balance">
          <span class="info-data-top"
            ><b>{{ parseInt(balance).toFixed(2) }}</b
            >元</span
          >
          <span class="info-data-bottom">我的余额</span>
        </router-link>
        <router-link tag="li" class="info-data-li" to="/benefit">
          <span class="info-data-top"
            ><b>{{ count }}</b
            >个</span
          >
          <span class="info-data-bottom">我的优惠</span>
        </router-link>
        <router-link tag="li" class="info-data-li" to="/points">
          <span class="info-data-top"
            ><b>{{ pointNumber }}</b
            >分</span
          >
          <span class="info-data-bottom">我的积分</span>
        </router-link>
      </ul>
    </section>
    <section class="profile-1reTe">
      <ul class="profile-1reTe-ul">
        <router-link tag="li" to="/order" class="profile-1reTe-li">
          <p>
            <span>
              <icon-svg icon-class="iconorder"></icon-svg>
            </span>
            我的订单
            <span>
              <icon-svg icon-class="iconarrow-left"></icon-svg>
            </span>
          </p>
        </router-link>
        <router-link tag="li" to="/mall" class="profile-1reTe-li">
          <p>
            <span>
              <icon-svg icon-class="iconshangcheng1"></icon-svg>
            </span>
            我的商城
            <span>
              <icon-svg icon-class="iconarrow-left"></icon-svg>
            </span>
          </p>
        </router-link>
        <router-link tag="li" to="/vipcard" class="profile-1reTe-li">
          <p>
            <span>
              <icon-svg icon-class="iconhuiyuan"></icon-svg>
            </span>
            我的会员
            <span>
              <icon-svg icon-class="iconarrow-left"></icon-svg>
            </span>
          </p>
        </router-link>
      </ul>
    </section>
    <section class="profile-1reTe">
      <ul class="profile-1reTe-ul">
        <router-link tag="li" to="/service" class="profile-1reTe-li">
          <p>
            <span>
              <icon-svg icon-class="iconfuwu"></icon-svg>
            </span>
            服务中心
            <span>
              <icon-svg icon-class="iconarrow-left"></icon-svg>
            </span>
          </p>
        </router-link>
        <router-link tag="li" to="/download" class="profile-1reTe-li">
          <p>
            <span>
              <icon-svg icon-class="iconeliaomo"></icon-svg>
            </span>
            下载中心
            <span>
              <icon-svg icon-class="iconarrow-left"></icon-svg>
            </span>
          </p>
        </router-link>
      </ul>
    </section>
    <foot></foot>
  </div>
</template>

<script>
import headTop from "@/components/header/head";
import foot from "@/components/footer/foot";

// import {
//   imgBaseUrl
// } from "@/config/env";
import { mapState, mapMutations } from "vuex";
export default {
  name: "profile",
  data() {
    return {
      profiletitle: "我的",
      username: "登录/注册", //用户名
      resetname: "",
      mobile: "暂无绑定手机号", //电话号码
      balance: 0, //我的余额
      count: 0, //优惠券个数
      pointNumber: 0, //积分数
      // avatar: "", //头像地址
      imgBaseUrl: "/image/",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    avatarUrl() {
      return this.imgBaseUrl + this.userInfo.avatar;
    },
  },
  components: {
    headTop,
    foot,
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations(["OUT_LOGIN"]),
    initData() {
      if (this.userInfo && this.userInfo.user_id) {
        // this.avatar = this.userInfo.avatar;
        this.username = this.userInfo.username;
        this.mobile = this.userInfo.mobile || "暂无绑定手机号";
        this.balance = this.userInfo.balance;
        this.count = this.userInfo.gift_amount;
        this.pointNumber = this.userInfo.point;
      } else {
        this.username = "登录/注册";
        this.mobile = "暂无绑定手机号";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin';

#profile {
  margin-top: 1.815417rem;
}

.profile-number {
  position: relative;

  background-color: $blue;

@include wh(100%, 3.833333rem);
}

.profile-link {
  display: flex;
  align-items: center;

  padding: 1rem;

@include ct;

  .user-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    margin-left: .5rem;

    .username {
      width: 10rem;

      color: #fff;

      font-family: Helvetica Neue, Tahoma, Arial;
      font-size: .8rem;
      font-weight: 700;
    }

    .phone {
      width: 10rem;

      color: #fff;

      font-size: .5733rem;
      font-weight: normal;

      vertical-align: middle;
    }
  }

  .iconshouji {
    color: #fff;

    font-size: .8rem;
  }

  .iconarrow-left {
    color: #fff;
  }
}

.privateImage {
  border-radius: 50%;

@include wh(2.5rem, 2.5rem);
}

.info-data-ul {
  display: flex;
  justify-content: space-around;

  background-color: #fff;

  .info-data-li {
    display: flex;
    align-items: center;
    flex-direction: column;

    .info-data-top {
      padding: .8rem 0 .4rem 0;

      color: #333;

      font-size: .55rem;

      b {
        font-family: Helvetica Neue, Tahoma;
        font-size: 1.2rem;
        font-weight: 700;
      }
    }

    .info-data-bottom {
      padding-bottom: .4rem;

      color: #666;

      font-size: .573rem;
    }
  }

  .info-data-li:nth-child(1) {
    b {
      color: #f90;
    }
  }

  .info-data-li:nth-child(2) {
    b {
      color: #ff5f3e;
    }
  }

  .info-data-li:nth-child(3) {
    b {
      color: #6ac20b;
    }
  }
}

.profile-1reTe {
  margin-top: .5rem;

  background-color: #fff;

  .profile-1reTe-li {
    position: relative;

    height: 1.8rem;
    padding-left: 1rem;

    font-size: .7rem;
    line-height: 1.8rem;

    .iconarrow-left {
      position: absolute;
      right: .5rem;

@include ct;
    }
  }
}

</style>
